<template>
  <ElDialog
    v-model="dialogVisible"
    :title="title"
    width="800"
    :before-close="handleClose"
  >
    <div class="searchTable">
      <ElRow class="search-color">
        <ElCol :span="8" class="searchCol">
          <ElSelect
            style="width: 68%"
            v-model="ruleForm.organization"
            placeholder="请选择所属组织"
          >
            <ElOption
              v-for="item in statusData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElCol>
        <ElCol :span="8" class="searchCol">
          <ElInput
            v-model="ruleForm.name"
            style="width: 68%"
            placeholder="请输入机场名称"
          />
        </ElCol>
        <ElCol :span="8" class="t-r">
          <ElButton type="primary" @click="search()">查询</ElButton>
          <ElButton @click="resetForm()">重置</ElButton>
        </ElCol>
      </ElRow>
    </div>
    <div class="tablePage">
      <div style="margin-bottom: 20px">
        <ElTable :data="tableData" stripe style="width: 100%" row-key="id">
          <ElTable.TableColumn prop="name" label="姓名" align="center" />
          <ElTable.TableColumn prop="sort" label="组织" align="center" />
          <ElTable.TableColumn prop="sort" label="手机号" align="center" />
          <ElTable.TableColumn prop="sort" label="账号" align="center" />
          <ElTable.TableColumn fixed="right" label="操作" align="center">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="rowClick(scope.row)"
              >
                选择
              </el-button>
            </template>
          </ElTable.TableColumn>
        </ElTable>
      </div>
      <div class="pagination">
        <ElPagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 80, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <ElButton @click="handleClose">取消</ElButton>
        <ElButton type="primary" @click="submitForm(ruleFormRef)">
          确定
        </ElButton>
      </div>
    </template>
  </ElDialog>
</template>
<script lang="ts" setup>
import {
  ElMessageBox,
  ElDialog,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElRadioGroup,
  ElRadio,
  ElMessage,
  ElSelect,
  ElOption,
  ElTreeSelect,
  ElTable,
  ElSwitch,
  ElPagination,
  ElRow,
  ElCol,
} from 'element-plus';
import { reactive, ref } from 'vue';
const emit = defineEmits(['flyhandRow']);
const dialogVisible = ref(false);
const title = ref('选择飞手');
const addDialog = () => {
  dialogVisible.value = true;
};

const editDialog = (obj) => {
  dialogVisible.value = true;
  ruleForm.id = obj.id;
  ruleForm.name = obj.name;
};

defineExpose({ addDialog, editDialog });
const ruleFormRef = ref();
const ruleForm = reactive<RuleForm>({
  id: '',
  name: '',
  organization: '',
});
const statusData = [
  {
    value: '1',
    label: '大理警务站',
  },
  {
    value: '2',
    label: '龙泽路警务站',
  },
];
const tableData = ref([
  {
    id: 1,
    status: false,
    name: '任务1',
  },
  {
    id: 1,
    status: false,
    name: '任务2',
  },
  {
    id: 3,
    status: false,
    name: '任务3',
  },
]);
let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(0);
const handleSizeChange = (val) => {
  pageSize.value = val;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};

const submitForm = async (formEl) => {
  dialogVisible.value = false;
  // if (!formEl) return;
  // await formEl.validate((valid, fields) => {
  //   if (valid) {
  //     // 添加成功
  //     ElMessage({
  //       plain: true,
  //       message: '添加成功',
  //       type: 'success',
  //     });
  //   } else {
  //     console.log('error submit!', fields);
  //   }
  // });
};

const resetForm = (formEl) => {
  ruleForm.name = '';
  ruleForm.organization = '';

  currentPage.value = 1;
};
const rowClick = (item) => {
  emit('flyhandRow', item);
  dialogVisible.value = false;
};

const handleClose = (done: () => void) => {
  dialogVisible.value = false;
};
</script>
<style lang="scss" scoped>
.tablePage {
  height: 50vh;
  margin-top: 20px;
  overflow-y: auto;
}

.tablePage::-webkit-scrollbar {
  width: 2px;
}

.pageStyle {
  height: auto !important;
}
</style>
